<template>
    <div>
      <div class="left" :style="{ height: heightTree }">
        <el-tree
          ref="tree"
          style="margin-left: 10px; margin-top: 5px; margin-bottom: 5px"
          :data="treeData"
          node-key="id"
          :props="defaultProps"
          highlight-current
          @node-click="handleNodeClick"
          :current-node-key="currentNodekey"
          :default-expanded-keys="[treeData[0].children[0]]"
        ></el-tree>
      </div>
  
      <div class="right">
        <div class="thumbnail" :style="{ height: heightY }">
          <img
            v-for="(image, index) in imageData"
            :src="image.description"
            :key="index"
            :style="{
              width: '140px',
              height: '200px',
              border: index === selectedImageIndex ? '2px solid red' : '',
            }"
            @click="selectImage(index)"
          />
        </div>
        <div class="bigPicture" :style="{ height: heightY }">
          <img
            :src="selectedImageData.description"
            alt=""
            style="width: 100%; height: 100%"
          />
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { getMaterialTree, clickMaterial, getImgFromCacheByFlag } from "@/api/datacentersg/achives/documentApi";
  export default {
    data() {
      return {
        heightY: window.innerHeight - 70 + "px",
        heightTree: window.innerHeight - 70 + "px",
        heightTrees: window.innerHeight - 80 + "px",
        tabPosition: "left",
        images: [],
        treeData: [],
        imageData:[],
        selectedImageIndex: 0,
        selectedImageData: {},
        defaultProps: {
          children: "children",
          label: "name",
        },
        currentNodekey: "", //默认选中的节点树
        name:'',
        idCard:'',
        description:'',
        materialid:'1',
      };
    },
    mounted() {
      this.getMaterialTree();
      this.init();
    },
    methods: {
      init(){
        let name = this.$route.query.name
        console.log(name,'name');
        let idCard = this.$route.query.idCard
        this.name = name;
        this.idCard = idCard;
      },
      // 获取人员档案左侧目录结构树
      getMaterialTree() {
        const params = {
          name: this.$route.query.name,
          idCard:this.$route.query.idCard, //身份证号
        };
        getMaterialTree(params).then((result) => {
          if (result.code === 0) {
            this.treeData = result.data.res_data;
            this.handleNodeClick(this.treeData[0].children[0]); // 默认展示第一个目录下的图片
          }
        });
      },
      selectChange() {},
      handleDefaultMenuSelect(index) {
        this.defaultActiveIndex = index; // 改变当前选中的菜单项
      },
      // 点击缩略图
      handleNodeClick(data) {
        if (data.children && data.children.length > 0) {
          // 点击的是父节点，不执行任何操作
          return;
        }
        this.currentNodekey = data.id;
        const materialid = this.materialid && this.currentNodekey;
        const params = {
          name: this.$route.query.name,
          idCard:this.$route.query.idCard, //身份证号
          materialid: materialid, //点击的目录ID
        };
        clickMaterial(params).then((result) => {
           if(result.code === 0){
               this.imageData = result.data.res_data;
               this.imageData.forEach((item,i)=>{
                const paramsNew = {
                  name: this.$route.query.name,
                  idCard:this.$route.query.idCard, //身份证号
                  fileName:item.fileName,//文件名
                }
                getImgFromCacheByFlag(paramsNew).then((result) => {
                  if(result.code === 0){
                    this.$set(item, 'description', result.data.res_data);
                  }
                });
              })
              this.selectImage(0); // 默认展示第一张图片
           }
        })
        
      },
      // 获取base64图片
      selectImage(index) {
        this.selectedImageIndex = index;
        this.selectedImageData = this.imageData[index];
      },
    },
  };
  </script>
  
  <style scoped>
  >>> .el-menu-item {
    margin-top: 5px;
  }
  .left {
    float: left;
    margin-left: 22.625vw;
    background: #f7f2ec;
    width: 18.417vw;
    height: 100%;
    margin-top: 30px;
    overflow-y: scroll;
  }
  .right {
    float: left;
    margin-left: 15px;
    background: #f7f2ec;
    margin-top: 30px;
  }
  .thumbnail {
    width:8.813vw;
    overflow-y: scroll;
    float: left;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    background: #fff;
  }
  .bigPicture {
    float: left;
    width: 500px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 10px;
    background: #fff;
  }
  >>> .el-tree-node__content {
    height: 60px;
  }
  
  /* background-color: #CFE5FC; */
  </style>